<template>
    <!--components/popup/index.wxml-->

    <view class="popup_mask" v-if="selfShow" @click="close">
        <view class="ui-mask-wrapper" @click.stop="">
            <view class="container">
                <view class="header">
                    {{cardObj.title}}
                </view>
                <view class="job">
                    {{cardObj.content}}
                </view>
                <view class="name">
                    {{cardObj.introduce}}
                </view>
                
                <image class="qrCode" :src="cardObj.qrCode" mode=""></image>
                <view class="text">
                    邀请客户扫码查看您的名片
                </view>
                
                <view class="btnContainer" @click="onSaveImg">
                    保存
                </view>
            </view>
            <image v-if="closeable" class="close_icon" src="../../static/image/home_pop_close.png" @click="close">
            </image>
        </view>
    </view>
</template>

<script>
	import Config from "@/config.js"; // 系统参数
	
	// #ifdef APP-PLUS
	var plugin = uni.requireNativePlugin('Vnidev-DyPlugin-Core')
	const dyclientId = Config.tiktokClientKeyApp;
	// #endif
	
    export default {
        data() {
            return {
                selfShow: false,
            };
        },

        components: {},
        props: {
            cardObj:{
                type: Object,
                default:{
                   name:"",
                   qrCode:"",
                   job:""
                }
            },
            
            name:{
                type: String,
                default: "",
            },  
            qrCodeUrl: {
                type: String,
                default: "",
            },
            value: {
                type: Boolean
            },
            closeable: {
                type: Boolean,
                default: true,
            }
        },
        watch: {
            value: {
                handler: function observer(val) {
                    var that = this;
                    console.log("popupCard")
                    that.selfShow = val
                },
                immediate: true
            }
        },

        methods: {
            close(e) {
                this.$emit('close');
                this.$emit('input', false)
            },
            onSaveImg(){
                this.savePoster()
            },
            // 保存海报到相册
            savePoster() {
            	let that = this
				// #ifdef APP-PLUS
				plugin.hasPhotoPerm({}, data => {
					console.log("getAlbumAuthorized", data)
					if (data.finished && data.write_photo && data.read_photo) {
						that.saveImg();
					} else {
						that.authConfirm()
					}
				});
				// #endif
            },
			
			gotoSystemSetting() {
				let that = this
				uni.openAppAuthorizeSetting({
					success(res) {
						console.log(res)
					}
				})
			},
			
            // 授权拒绝后，再次授权提示弹窗
            authConfirm() {
            	let that = this
            	uni.showModal({
            		content: '检测到您没打开保存图片权限，是否去设置打开？',
            		confirmText: "确认",
            		cancelText: "取消",
            		success: function(res) {
            			if (res.confirm) {
            				that.gotoSystemSetting()
            			} else {
            				uni.showToast({
            					title: '您没有授权，无法保存到相册',
            					icon: 'none'
            				})
            			}
            		}
            	});
            },
            
            // 图片保存到本地
            saveImg() {
            	let that = this;
            
            	if ((typeof that.cardObj.qrCode == 'string')
                    && (that.cardObj.qrCode.length > 0)
                ) {
            		that.saveImage();
            	} 
            },
            
            saveImage() {
            	let that = this;
            	uni.getImageInfo({
            		src: that.cardObj.qrCode,
            		success: function(image) {
            			console.log('图片信息：', JSON.stringify(image));
            			uni.saveImageToPhotosAlbum({
            				filePath: image.path,
            				success: function() {
            					console.log('save success');
            					that.$emit('close');
            					uni.showToast({
            						title: '图片保存成功',
            						icon: 'none',
            						duration: 2200
            					});
            				}
            			});
            		},
            		fail: function(res) {
            			console.log('saveImg:', res)
            		}
            	});
            },
        }
    };
</script>
<style lang="scss">
    /* components/popup/index.wxss */
    .popup_mask {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* justify-content: center; */
    }

    .ui-mask-wrapper {
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: center;
    }


    .container {
        width: 580rpx;
        // height: 700rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        background-size: 100% 230rpx;
        background-repeat: no-repeat;
        background-image: url(../../static/image/home_pop_bg.jpg);
        display: flex;
        flex-direction: column;
        align-items: center;
        .header{
            margin-top: 48rpx;
            height: 30rpx;
            font-size: 30rpx;
            line-height: 30rpx;
            color: #ffffff;
        }
        .job{
            margin-top: 20rpx;
            height: 30rpx;
            font-size: 30rpx;
            line-height: 30rpx;
            color: #ffffff;

        }
        .name{
            margin-top: 39rpx;
            height: 36rpx;
            font-size: 36rpx;
            font-weight: bold;
            font-stretch: normal;
            line-height: 24rpx;
            letter-spacing: 0rpx;
            color: #ffffff;
        }
        .qrCode{
            width: 340rpx;
            height: 340rpx;
            margin-top: 55rpx;
        }
        .text{
            font-size: 30rpx;
            line-height: 30rpx;
            color: #999999;
            margin-top: 29rpx;
        }
        .btnContainer{
            width: 250rpx;
            height: 60rpx;
            background-color: #1890FF;
            text-align: center;
            line-height: 60rpx;
            border-radius: 40rpx;
            color: #FFFFFF;
            margin-top: 30rpx;
            margin-bottom: 30rpx;
            
        }
        
    }


    .popup_mask .close_icon {
        width: 70rpx;
        height: 70rpx;
        margin-top: 40rpx;
    }


    .popupContainer {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .img {
            margin-top: 98rpx;
            width: 154rpx;
            height: 154rpx;
        }

        .title {
            font-size: 36rpx;
            font-weight: normal;
            font-stretch: normal;
            line-height: 36rpx;
            letter-spacing: 0rpx;
            color: #7d4228;
            margin-top: 53rpx;
        }

        .content {
            font-size: 30rpx;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30rpx;
            letter-spacing: 0rpx;
            color: #ff7021;
            margin-top: 25rpx;
        }

 
    }
</style>
